<template>
	<div class="frame">
		<div class="header-wrapper">
			<m-header></m-header>
		</div>
		<div class="main-wrapper">
			<!-- 产品总导航 -->
			<div :class="['sidebar-wrapper', sidebarIsOpen ? 'show' : 'hide']" ref="sidebar">
				<div class="icon iconfont icon-fold" @click="toggleSidebar"></div>
				<sidebar></sidebar>
			</div>
			<!-- 产品内部导航 -->
			<div :class="['navbar-wrapper', navbarIsOpen ? 'show' : 'hide']" v-if="navbar.list != undefined">
				<navbar></navbar>
				<pull v-if="navbarIsOpen" @toggle="toggleNavbar"></pull>
			</div>
			<!-- 主要内容 路由控制 -->
			<div class="view-wrapper">
				<div class="content">
					<router-view v-if="isRouterAlive"/>
				</div>
				<pull v-if="!navbarIsOpen" @toggle="toggleNavbar" :BgColor="'#d5dae1'" :FontColor="'#2e2e2e'"></pull>
			</div>
		</div>
	</div>
</template>

<script>
import Pull from "pc/frame/Pull"
import MHeader from "pc/frame/header/Header"
import Sidebar from "pc/frame/sidebar/Sidebar"
import Navbar from "pc/frame/navbar/Navbar"
import {mapGetters} from 'vuex'

export default {
	props: ['isRouterAlive'],
	data(){
		return {
			sidebarIsOpen: false,//sidebar是否展开
			navbarIsOpen: true,//navbar是否展开
		}
	},
	components: {
		MHeader,
		Sidebar,
		Navbar,
		Pull
	},
	methods: {
		/*sidebar交替展开*/
		toggleSidebar(){
			this.sidebarIsOpen = !this.sidebarIsOpen
		},
		/*navbar交替展开*/
		toggleNavbar(){
			this.navbarIsOpen = !this.navbarIsOpen
		},
	},
	computed: {
		...mapGetters([
    		'navbar'
    	])
	}
}
</script>

<style lang="stylus" scoped>
.frame
	display: flex
	flex-direction: column
	height: 100%
	.header-wrapper
		width: 100%
		height: 50px
	.main-wrapper
		flex: 1
		display: flex
		overflow: auto
		.sidebar-wrapper
			width: 50px
			border-top: 1px solid #393d41
			background-color: #252a2f
			overflow: hidden
			transition: all 350ms
			z-index: 1
			&.show
				width: 230px
			&.hide
				width: 50px
			&:hover
				// width: 230px
			.icon-fold
				height: 40px
				&:before
					width: 100%
					height: 100%
					display: block
					cursor: pointer
					text-align: center
					line-height: 40px
					color: #fff
		.navbar-wrapper
			position: relative
			width: 180px
			background-color: #e8ebef
			overflow: hidden
			&.show
				animation: navbar-show .3s forwards
			&.hide
				animation: navbar-hide .3s forwards
			.pull
				position: absolute
				right: -7px
				top: 50%
				transform: translateY(-50%)
				cursor: pointer
				transition: right 100ms
				&:hover
					right: 0px
		.view-wrapper
			position: relative
			overflow: auto
			flex: 1
			.content
				padding: 15px
				box-sizing: border-box
				height: 100%
				width: 100%
				overflow: auto
			.pull
				position: absolute
				left: -7px
				top: 50%
				transform: translateY(-50%) rotate(180deg)
				cursor: pointer
				transition: left 100ms
				&:hover
					left: 0px
@keyframes navbar-show
	from
		width: 0px
	to
		width: 180px
@keyframes navbar-hide
	from
		width: 180px
	to
		width: 0px
</style>
